<h3 class="purchases step">Purchases</h3>

<ul class="purchases">
    <li *ngFor="let purchase of purchases" (click)="onSelect(purchase)" [class.selected]="purchase === selectedPurchase" class="purchase">    
        <span class="date">{{purchase.transactionDate  | date:'medium' }}</span>
        <button (click)="DownloadLicense(purchase)">download lcpl</button> 
        <button (click)="DownloadPublication(purchase)">download publication</button> 
        <button (click)="CheckStatus(purchase)">status</button> 
        <span class="label">{{purchase.label}}</span><br/>    
        <span class="licenseID">{{purchase.licenseID}}</span>
        <div class="register">
            ID <input class="DeviceID" placeholder="Device ID" #deviceID />
            Name <input class="DeviceLabel" #deviceLabel placeholder="optional name"/>
            <button (click)="RegisterDevice(purchase, deviceID.value, deviceLabel.value)">Register</button>
        </div>        
        <div class="rights" *ngIf="purchase.partialLicense | FilterRights">
            <div>
                <span >{{ purchase.partialLicense  | ShowRights }}</span>
                <button (click)="ReturnLoan(purchase,deviceID.value, deviceLabel.value)">Return</button> 
            </div>
            <div>
                <label>Renew for #hours:</label>
                <input class="inputhours" #hours />
                <button (click)="RenewLoan(purchase,hours.value,deviceID.value, deviceLabel.value)">Renew</button> 
            </div>        
        </div>
    </li>
</ul>